<template>
  <div class="logs-index">
    <el-tabs type="border-card">
      <el-tab-pane label="异常日志列表">
        <AbnormalLogList />
      </el-tab-pane>
      <el-tab-pane label="异常监测配置">
        <AbnormalMonitorConfig />
      </el-tab-pane>
      <el-tab-pane label="告警日志列表">
        <AlarmLogList />
      </el-tab-pane>
      <el-tab-pane label="接收人员列表">
        <ReceiverList />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import AbnormalLogList from './components/AbnormalLogList.vue';
import AbnormalMonitorConfig from './components/AbnormalMonitorConfig.vue';
import AlarmLogList from './components/AlarmLogList.vue';
import ReceiverList from './components/ReceiverList.vue';

export default {
  name: "LogsIndex",
  components: {
    AbnormalLogList,
    AbnormalMonitorConfig,
    AlarmLogList,
    ReceiverList
  }
};
</script>

<style scoped lang="scss">
.logs-index {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  ::v-deep .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    .el-tabs__content {
      flex: 1;
      .el-tab-pane {
        height: 100%;
      }
    }
  }
}
</style>
